<template>
	<view class="content">
		<!-- 自定义导航小程序以及H5平台出现的代码 -->
		<!-- #ifdef MP || H5 -->
		<view class="top_list" :style="{ height :(navBarHeight) + (statusBarHeight) +'px' }">
			<view :style="{height:statusBarHeight + 'px'}">

			</view>
			<view :style="{height:navBarHeight + 'px', width: menuLeftInfo + 'px'}" class="list_top">
				<view class="list_top_01">
					<view>本地时间：{{time1}}</view>
				</view>
			</view>
		</view>
		<!-- #endif -->



		<!-- 仅出现在App平台的代码 -->
		<!-- #ifdef APP-PLUS -->
		<view style="height: 100rpx; width: 100%;">

		</view>
		<!-- #endif -->

		<view class="bottom_list" :style="{height:'calc(100% - '+((navBarHeight + statusBarHeight) +'px')+')'}">
			<view class="bottom_list_01">
				<view>
					<image src="../../static/酒店.png"></image>
					<view>五星艾特酒店欢迎您</view>
				</view>
			</view>
			<view class="bottom_list_02">
				<div class="home-banner-box">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in swiper_list" key="item">
							<image :src="item.picUrl"></image>
						</swiper-item>
					</swiper>
				</div>
				<div class="homt-banner-box_01">
					<div class="homt-banner-box_01_01" @click="yu">
						<div class="homt-aa">
							<image src="../../static/房卡1.png"></image>
							<view class="view1">预约取卡</view>
							<view class="view2">take card</view>
						</div>
					</div>
					<div class="homt-banner-box_01_02">
						<div class="homt-banner-box_01_02_01">
							<div class="homt-aa" @tap="yue">
								<image src="../../static/房卡1.png"></image>
								<view class="view1" >无预约入住</view>
								<view class="view2">chek in</view>
							</div>
						</div>
						<div class="homt-banner-box_01_02_02">
							<div class="homt-banner-box_01_02_02_01">
								<div class="homt-aa">
									<image src="../../static/房卡1.png"></image>
									<view class="view1">续住</view>
									<view class="view2">continue room</view>
								</div>
							</div>
							<div class="homt-banner-box_01_02_02_02">
								<div class="homt-aa">
									<image src="../../static/房卡1.png"></image>
									<view class="view1">退房</view>
									<view class="view2">check out</view>
								</div>
							</div>
						</div>
					</div>
				</div>
			</view>
			<view class="bottom_list_03">
				<div class="bottom_list_03_01">
					<text>某某公司</text>
					<text>版本V1.0 TID：xxx Tel：021-00000000</text>
				</div>
			</view>
			<!-- <button class="button" type="primary" @click="toggle('center')"><text class="button-text">居中</text></button> -->
			<uni-popup ref="popup" style="background-color: beige; border-radius: 20rpx;"  @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<image style="width: 250rpx; height: 200rpx; border-radius: 20rpx;" src="../../static/加载2.gif"></image>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, //状态栏的高度
				windowWidth: 0, //可视区域的宽
				menuButtonInfo: 0, //胶囊的位置
				navBarHeight: 0, //顶部整体高度
				menuLeftInfo: 0, //胶囊左边的距离
				time1: "",
				swiper_list: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: ''
			}
		},
		onLoad() {

		},
		created() {
			// #ifdef  MP || H5
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
					this.windowWidth = res.windowWidth
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					this.navBarHeight = (menuButtonInfo.bottom - this.statusBarHeight) + (menuButtonInfo.top -
						this.statusBarHeight)
					this.menuLeftInfo = menuButtonInfo.left
				}
			})
			// #endif
			this.time_data()
			this.switch_data()
		},
		methods: {
			// 实时获取当前时间
			time_data() {
				setInterval(() => {
					let myDate = new Date()
					let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
					let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
					let myToday = myDate.getDate(); //获取当前日(1-31)
					myMonth = myMonth > 9 ? myMonth : '0' + myMonth
					myToday = myToday > 9 ? myToday : '0' + myToday
					let hours = myDate.getHours();
					let minutes = myDate.getMinutes();
					let seconds = myDate.getSeconds();
					hours = hours > 9 ? hours : '0' + hours
					minutes = minutes > 9 ? minutes : '0' + minutes
					seconds = seconds > 9 ? seconds : '0' + seconds
					let nowDate = `${myYear}-${myMonth}-${myToday} ${hours}:${minutes}:${seconds}`
					this.time1 = nowDate
				}, 1000)
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			// 获取轮播图的接口
			switch_data() {
				console.log(123)
				uni.request({
					url: "https://api.it120.cc/f54bf8db20a8d381608eaca044440d26/banner/list",
					method: "GET",
					success: (res) => {
						console.log(res);
						if (res.data.code === 0) {
							this.swiper_list = res.data.data
						} else {

						}

					},
					fail(err) {
						console.log(err);

					}
				})
			},
			// 点击预约取卡
			yu() {
				console.log(123)
				uni.navigateTo({
					url:"../recognition/recognition"
				})
			},
				
			yue(){
				uni.redirectTo({
					url:"../yue/yue"
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		height: 100%;
	}

	swiper {
		height: 90% !important;
		width: 90% !important;
		margin: auto;

		swiper-item {
			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.content {
		width: 100%;
		height: 100%;
		overflow: hidden;
		.top_list {
			background-color: #823835;

			.list_top {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ddd38c;

				.list_top_01 {
					font-size: 25rpx;
					width: 100%;

					view {
						margin-left: 40rpx;
					}
				}
			}
		}
	}



	.bottom_list {
		width: 100%;
		overflow: auto;
		background-color: #f3f6f6;

		.bottom_list_01 {
			width: 100%;
			height: 150rpx;
			margin-top: 50rpx;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;

			image {
				width: 60rpx;
				height: 60rpx;
				border: 8rpx solid transparent;
				border-radius: 50%;
				padding: 10rpx;
				background-clip: padding-box, border-box;
				background-origin: padding-box, border-box;
				background-image: linear-gradient(to right, #ffffff, #fff), linear-gradient(to right, #cd9e29, #8aa484);
			}

			view {
				text-align: center;
				font-size: 28rpx;
				color: #985054;
			}
		}

		.bottom_list_02 {
			width: 75%;
			height: 70%;
			margin: auto;
			margin-top: 40rpx;

			// border:5rpx solid #c9ba83;
			.home-banner-box {
				width: 100%;
				height: 30%;
				background-color: #fff;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}

			.homt-banner-box_01 {
				width: 100%;
				height: 63%;
				margin-top: 7%;

				.homt-banner-box_01_01 {
					width: 40%;
					height: 100%;
					background-color: #fff;
					float: left;
					border-radius: 10px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;

					.homt-aa {
						width: 100%;
						text-align: center;

						image {
							width: 80rpx;
							height: 80rpx;
						}

						.view1 {
							font-weight: 800;
							font-size: 30rpx;
						}

						.view2 {
							font-size: 20rpx;
						}
					}
				}

				.homt-banner-box_01_02 {
					width: 55%;
					height: 100%;
					float: right;
					position: relative;

					.homt-banner-box_01_02_01 {
						height: 45%;
						width: 100%;
						background-color: #fff;
						position: absolute;
						top: 0;
						border-radius: 20rpx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.homt-aa {
							width: 100%;
							text-align: center;

							image {
								width: 80rpx;
								height: 80rpx;
							}

							.view1 {
								font-weight: 800;
								font-size: 30rpx;
							}

							.view2 {
								font-size: 20rpx;
							}
						}
					}

					.homt-banner-box_01_02_02 {
						height: 50%;
						width: 100%;
						position: absolute;
						bottom: 0;
						display: flex;
						justify-content: space-between;

						.homt-banner-box_01_02_02_01 {
							width: 45%;
							height: 100%;
							background-color: #fff;
							border-radius: 20rpx;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;

							.homt-aa {
								width: 100%;
								text-align: center;

								image {
									width: 80rpx;
									height: 80rpx;
								}

								.view1 {
									font-weight: 800;
									font-size: 30rpx;
								}

								.view2 {
									font-size: 20rpx;
								}
							}
						}

						.homt-banner-box_01_02_02_02 {
							width: 45%;
							height: 100%;
							background-color: #fff;
							border-radius: 20rpx;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;

							.homt-aa {
								width: 100%;
								text-align: center;

								image {
									width: 80rpx;
									height: 80rpx;
								}

								.view1 {
									font-weight: 800;
									font-size: 30rpx;
								}

								.view2 {
									font-size: 20rpx;
								}
							}
						}
					}

				}
			}
		}

		.bottom_list_03 {
			position: absolute;
			bottom: 0;
			height: 100rpx;
			width: 100%;
			background-color: black;
			color: #fff;

			.bottom_list_03_01 {
				height: 100%;
				width: 90%;
				margin: auto;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 20rpx;
			}
		}
	}
</style>
